/* pages/login-component/loginPage/loginPage.wxss */
page {
    background-color: white
}

.c-page-wrapper {
    background: white;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    margin:0 auto;
    .login-back {
        display: flex;
        width: 100%;
        height: 506px;
        position: relative;
    }

    .background-image {
        height: 100%;
        position: absolute;
        width: 100%;
        left: 0px;
        top: 0px;
    }

    .login-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        .login_sysimg_wrapper{
            width: 224px;
            height: 224px;
            border-radius: 50%;
            overflow: hidden;
            margin-top: 126px;
            background-color: rgba(255,255,255, 0.15);
            .login_sysimg_inwrapper{
                width: 200px;
                height: 200px;
                border-radius: 50%;
                overflow: hidden;
                margin:12px auto;
                background-color: rgba(255,255,255, 0.25);
                .login-sysimg {
                    height: 174px;
                    width: 174px;
                    display:block;
                    margin:13px auto;
                }
            }
        }

        .login-text {
            align-self: center;
            font-size: 36px;
            line-height: 1;
            // margin-top: 13px;
            color: white;
            font-family: Microsoft YaHei;
        } 
    }


    .login-type{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin:37px auto 54px;
        .login-type-item{
            display: flex;
            align-items: center;
            margin:0 27px;
            .login-type-empty{
                width: 32px;
                height: 32px;
                border:2px solid rgb(180,180,180);
                box-sizing: border-box;
                border-radius: 50%;
            }
            .login-type-img{
                width: 32px;
                height: 32px;
            }
            .login-type-txt{
                font-size: 24px;
                color: rgb(51,51,51);
                margin-left: 10px;
            }
        }
    }
}



.login-school-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    z-index: 20;
    margin-bottom: 20px;
    position: relative;
}
.list-cell {
    position: absolute;
    top: 90px;
    display: flex;
    flex-direction: column;
    background-color: white;
    box-sizing: border-box;
    justify-content: flex-start;
    width: 574px;
    z-index: 20;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.18);
    max-height: 320px;
}

.school-cell {
    display: flex;
    height: 80px;
    border-bottom: 1px solid #f2f2f2;
    color: #333333;
    align-items: center;
    padding-left: 40px;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.school-cell-hover {
    background-color: #f2f2f2;
}


.login-school-view > .login-cell{
    margin-bottom: 0;
}
.login-cell {
    display: flex;
    height: 88px;
    width: 574px;
    border-bottom: 2px solid rgb(0,153,255);
    background-color: white;
    align-items: center;
    margin-bottom: 20px;
}


.login-icon {
    height: 44px;
    width: 44px;
    margin-left: 16px;
    align-self: center;
}

.login-palceholder {
    font-family: Microsoft YaHei;
}

.login-input {
    font-family: Microsoft YaHei;
    margin-left: 20px;
    background-color: white;
    text-align: left;
    height: 88px;
    line-height: 88px;
    font-size: 32px;
    flex: 1;
    margin-right: 10px;
    background-color: rgba(0, 0, 0, 0);
    width: 100%;
    input{
        height: 100%;
    }
    input::-webkit-input-placeholder{
        color:rgb(204,204,204);
        font-size:32px;     
    }
    input::-moz-placeholder{   /* Mozilla Firefox 19+ */
        color:rgb(204,204,204);
        font-size:32px;     
    }
    input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
        color:rgb(204,204,204);
        font-size:32px;    
    }
    input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
        color:rgb(204,204,204);
        font-size:32px;     
    }
}
.login-loss-pwd{
    font-size: 26px;
    line-height: 88px;
    color: rgb(0,153,255);
    &:active{
        opacity: 0.8;
    }
}


.login-button {
    height: 88px;
    width: 574px;
    margin-top: 52px;
    align-self: center;
    /* background:linear-gradient(to right, #43CBF4 , #40A1F7); */
    background: -webkit-linear-gradient(180deg, rgb(35,161,250) 30%, rgb(4,202,244));
    color: white;
    font-size: 36px;
    line-height: 88px;
    border-radius: 98px;
    box-shadow: 1px 8px 10px #B8DDF9;
    letter-spacing: 36px;
    box-sizing: border-box;
    padding-left: 36px;
}
.login-button:active{
    color: white !important;
}

.login-button-active {
    color: white;
    background: -webkit-linear-gradient(180deg, rgb(21, 150, 241) 30%, rgb(5, 191, 233));
}

.login-button::after {
    border-radius: 98px;
}


.login-to-registe{
    position: absolute;
    bottom: 85px;
    width: 100%;
    text-align: center;
    font-size: 26px;
    color: rgb(153,153,153);
    .login-to-link{
        color: rgb(0,153,255);
        text-decoration: underline;
        font-style:italic;
        &:active{
            opacity: 0.8;
        }
    }
}